<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin/public/form::head(_)"/>
<style>
    .layui-table-cell {
        height: auto !important;
        max-height: 90px !important;
    }

    .qiniupic li {
        float: left;
        margin: 3px;
        border: 1px solid #ccc;
        position: relative;
        border-radius: 2px;
    }

    .qiniupic li:hover {
        border: 2px solid #00CC33 !important;
        margin: 2px;
        border-radius: 2px;
    }

    .qiniupic li:hover i.layui-icon-ok {
        display: block;
    }

    .qiniupic li.active {
        border: 2px solid green;
        margin: 2px;
        border-radius: 2px;
    }

    .qiniupic li i.layui-icon-ok {
        display: none;
        position: absolute;
        right: auto;
        left: 0;
        width: 16px;
        height: 16px;
        line-height: 16px;
        border: 2px solid #d2d2d2;
        font-size: 12px;
        border-radius: 2px;
        background-color: #fff;
        -webkit-transition: .1s linear;
        transition: .1s linear;
        color: #fff;
        text-align: center;
    }

    .qiniupic li i:before {
        content: "\e605";
    }

    .qiniupic li.active i.layui-icon-ok {
        display: block;
        border-color: #5FB878 !important;
        background-color: #5FB878;
        color: #fff;
    }

    .qiniupic li img:hover {
        cursor: pointer;
        background: rgba(0, 0, 0, 0.5);
    }

    .qiniupic li img {
        width: 190px;
        height: 147px;
        object-fit: cover;
    }

    .qiniupic li div {
        border-top: 1px solid #ccc;
        text-align: center;
    }
</style>
<body th:replace="admin/public/form::body(~{::div})">
<div class="layui-card">
    <div class="layui-card-header ">
        <span class="layui-breadcrumb">
          <a href="/admin" target="_blank">首页</a>
          <a href="javascript:;">图片管理</a>
          <a><cite>七牛云管理</cite></a>
        </span>
        <a class="layui-btn layui-btn-sm" style="line-height:1.6em;margin-top:3px;float:right"
           href="javascript:location.replace(location.href);" title="刷新">
            <i class="layui-icon layui-icon-refresh-3" style="line-height:30px"></i></a>
    </div>
    <div class="layui-card-body ">
        <button class="layui-btn layui-btn-sm" id="uploud_pic"><i class="layui-icon"></i>上传图片</button>
        <button class="layui-btn layui-btn-sm layui-btn-normal" id="pick_confirm">确定</button>
    </div>
    <div class="layui-card-body ">
        <table class="layui-hide" id="test" lay-filter="demo"></table>
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i
                    class="layui-icon layui-icon-edit"></i>编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i
                    class="layui-icon layui-icon-delete"></i>删除</a>
        </script>
        <ul class="layui-clear qiniupic">
        </ul>
        <div id="test1"></div>
    </div>
</div>
</body>
<script>
    layui.use(['table', 'jquery', 'laypage', 'upload', 'element'], function () {
        var $ = layui.jquery,
            laypage = layui.laypage,
            upload = layui.upload;
        single_check = true;//是否单选
        tree_data = {};
        limit = 30;
        layui.element.render();

        function get_data($page) {
            $.ajax({
                async: false,
                url: '/admin/pic/tree',
                type: 'get',
                data: {page: $page, limit: limit},
                dataType: 'json',
                success: function (res) {
                    tree_data = res;
                    rendor_li();
                }
            });
        }

        function rendor_li() {
            var li_str = '<li><i class="layui-icon layui-icon-ok"></i><img src=""><div>2019-12-30</div></li>';
            $('.qiniupic').html('');
            for (var i = 0; i < tree_data.data.length; i++) {
                var $li = $(li_str);
                $li.find('img').attr('src', tree_data.data[i].url);
                $li.find('div').text(tree_data.data[i].lastTime);
                $('.qiniupic').append($li)
            }
        }

        //执行一个laypage实例
        $.ajax({
            async: false,
            url: '/admin/pic/tree',
            type: 'get',
            data: {limit: limit},
            dataType: 'json',
            success: function (res) {
                tree_data = res;
                rendor_li();
            }
        });
        laypage.render({
            elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
            , count: tree_data.count //数据总数，从服务端得到
            , limit: limit
            , jump: function (obj, first) {
                if (!first) {
                    get_data(obj.curr);
                }
            }
        });
        $(document).on("click", ".qiniupic li", function () {
            $(this).toggleClass('active');
            if (single_check) {
                $(this).siblings().removeClass('active');
            }
        });
        String.prototype.format_args = function (args) {
            var result = this;
            if (arguments.length > 0) {
                if (arguments.length == 1 && typeof (args) == "object") {
                    for (var key in args) {
                        if (args[key] != undefined) {
                            var reg = new RegExp("({" + key + "})", "g");
                            result = result.replace(reg, args[key]);
                        }
                    }
                } else {
                    for (var i = 0; i < arguments.length; i++) {
                        if (arguments[i] != undefined) {
                            var reg = new RegExp("({)" + i + "(})", "g");
                            result = result.replace(reg, arguments[i]);
                        }
                    }
                }
            }
            return result;
        }
        $('#pick_confirm').click(function () {
            var url = $('.active img').attr('src');
            if (url == undefined) {
                parent.layer.msg('请先选择图片,在点击确定');
                return false;
            }
            //xadmin.js line 3
            parent.eval(js_str.format_args(url));
            parent.layer.closeAll();
        });
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#uploud_pic'
            , url: '/admin/upload/img'
            , done: function (res) {
                if (res.code == 0) {
                    layer.msg(res.msg, {icon: 1});
                    window.location.reload();
                } else {
                    layer.msg(res.msg, {icon: 5});
                }
            }
            , error: function () {
                //演示失败状态，并实现重传
                layer.msg('上传失败', {icon: 5});
            }
        });
    });
</script>
</html>